<script setup lang="ts">
import { watch } from 'vue';
import { useAppStore } from '@/store/modules/app';
import { useEcharts } from '@/hooks/common/echarts';
import * as echarts from 'echarts/core';

defineOptions({
  name: 'BubbleChart'
})


const chartdata = [
  { name: '污水', sum: 208, size: 50 },
  { name: '碳排放', sum: 80, size: 60 },
  { name: '钢铁1', sum: 108, size: 70 },
  { name: '碳排放1', sum: 80, size: 80 },
  { name: '钢铁2', sum: 108, size: 90 }
];
const color = ['#6DFFA1', '#56C7F6', '#F9F08A', '#6DFFA1', '#56C7F6', '#F9F08A'];
const data = []

chartdata.map((item, index) => {
  data.push(
    {
      name: item.name + '\n\n' + item.sum,
      value: 111,
      symbolSize: item.size,
      draggable: true,
      label: {
        normal: {
          textStyle: {
            fontSize: 12,
            color: '#fff',
          },
        },
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
            {
              offset: 0.2,
              color: 'rgba(27, 54, 72, 0.2)',
            },
            {
              offset: 0.8,
              color: color[index],
            },
          ]),
          opacity: 1,
          borderWidth: 1,
          borderColor: color[index],
          shadowBlur: 7,
          symbolOffset: 0.6,
          shadowColor: color[index],
        },
      },
    },
  )
})





const appStore = useAppStore();

const { domRef, updateOptions } = useEcharts(() => ({


  backgroundColor: '#16222E',
  animationDurationUpdate: function (idx) {
    return idx * 100;
  },
  tooltip: {
    trigger: 'item',
    formatter: function (params, ticket, callback) {
      return params.data.tips || params.name;
    },
  },
  animationEasingUpdate: 'bounceIn',
  itemStyle: {
    // color: 'red',
  },
  cursor: 'pointer',
  series: [
    {
      type: 'graph',
      layout: 'force',
      cursor: 'pointer',
      force: {
        repulsion: 200,
        edgeLength: 100,
      },
      roam: true,
      label: {
        normal: {
          show: true,
        },
      },

      data,
    },
  ],



}));

async function mockData() {
  await new Promise(resolve => {
    setTimeout(resolve, 1000);
  });

  updateOptions(opts => {
    console.log('opts', opts)

    // opts.series[0].data = [
    //   { name: $t('page.home.study'), value: 20 },
    //   { name: $t('page.home.entertainment'), value: 10 },
    //   { name: $t('page.home.work'), value: 40 },
    //   { name: $t('page.home.rest'), value: 30 }
    // ];

    return opts;
  });
}

function updateLocale() {
  updateOptions((opts, factory) => {
    const originOpts = factory();
    console.log('opts', opts);
    console.log('originOpts', originOpts);

    return opts;
  });
}

async function init() {
  mockData();
}

watch(
  () => appStore.locale,
  () => {
    updateLocale();
  }
);

// init
init();
</script>

<template>
  <ACard :bordered="false" class="card-wrapper">
    <div ref="domRef" class="h-360px overflow-hidden"></div>
  </ACard>
</template>

<style scoped></style>
